<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div>
       <ul style="height:一张图加文字的高;overflow:hidden;">
           <li id="p1"><img src="" alt="">
                <p>1文字</p>
            </li>
            <li><img src="" alt="">
                <p>2文字</p>
            </li>
            <li><img src="" alt="">
                <p>3文字</p>
            </li>
            <li><img src="" alt="">
                <p>4文字</p>
            </li>
       </ul>
       <p>
           <a href="#p1">1</a>
           <a href="#p2">1</a>
           <a href="#p3">1</a>
           <a href="#p4">1</a>
       </p>
   </div> 

   上节回顾
        锚点（锚记）
        层叠顺序 z-index 值越大越靠上，可以取负值 不用加单位
        固定定位 position:fixed; left top right bottom
            水平垂直居中
                position:fixed;
                top:50%;
                left:50%;
                margin-left:-盒子宽度的一半;
                margin-top:-盒子高度的一半;

                left:0; right:0;top:0;bottom:0; margin:auto;

        粘性定位 相对定位和固定定位的结合

        透明  记
            background:rgba()

            opacity:  0.5; 点前面的零可以省略不写 0-1  不加单位
            filter:alpha(opacity=50);

</body>
</html>